<template>
	<view v-if="!showSkeleton && showPage" class="content">
		<modal v-if="showModal" :textAlign="modalType == '1' ? 'left' : 'center'" :modalType="modalType"
			:title="modalTitle" :content="modalContent" :confirmTxt="confirmTxt"
			:cancelColor="modalType == '3' ? '#FFA900' : '#999999'" :showCancelBtn="showCancelBtn"
			@cancel="showModal = false" @confirm="confirmModal"></modal>
		<view class="top-banner">
			<banner :bannerList="bannerList" :swiperHeight="'100px'"></banner>
		</view>
		<!-- 头部信息 -->
		<view class="companyWrap">
			<view v-if="userInfo && userInfo.enterpriseId" class="companyBox">
				<view class="img">
					<image class="pic" :src="
              isMan
                ? '../../static/index/photoMan.png'
                : '../../static/index/photoWoman.png'
            " mode="aspectFill"></image>
				</view>
				<view  class="companyCon">
					<view class="name">{{ userInfo.enterpriseName }}</view>
					<view class="position">
						<text class='uname'>{{userInfo.name }}</text>
						<text class='upos'>{{ userInfo.postName }}</text>
					</view>
				</view>
				<view class="btn" @click="gotoCompanyPage()">切换公司</view>
			</view>
			<view v-else class="companyNone">
				<view class="tit">暂无公司</view>
				<!-- <view class="titSub">请先进行扫码入职</view> -->
			</view>
		</view>
		<!-- 差旅审批 -->
		<view v-if="isHavePermission" class="toolWrap">
			<view class="toolTitle">我的审批</view>
			<view class="toolBox">
				<view class="toolItem" @click="scanApproval">
					<image class="toolImg" src="../../static/travelService/chuchai.png" mode="aspectFill"></image>
					<view class="itemName">出差审批</view>
				</view>
				<view class="toolItem" @click="overproofApproval()">
					<image class="toolImg" src="../../static/travelService/chaobiao.png" mode="aspectFill"></image>
					<view class="itemName">超标审批</view>
				</view>
				<view class="toolItem" @click="toExpensesClaimsApp()">
					<image class="toolImg" src="../../static/travelService/baoxiao.png" mode="aspectFill"></image>
					<view class="itemName">报销审批</view>
				</view>
			</view>
		</view>
		<!-- 差旅申请 -->
		<view class="toolWrap">
			<view class="toolTitle">差旅申请</view>
			<view class="toolBox">
				<view class="toolItem" @click="scanAgreement">
					<image class="toolImg" src="../../static/travelService/chuchai.png" mode="aspectFill"></image>
					<view class="itemName">出差申请</view>
				</view>
				<view class="toolItem" @click="overproof()">
					<image class="toolImg" src="../../static/travelService/chaobiao.png" mode="aspectFill"></image>
					<view class="itemName">超标申请</view>
				</view>
				<view class="toolItem" @click="toExpensesClaims()">
					<image class="toolImg" src="../../static/travelService/baoxiao.png" mode="aspectFill"></image>
					<view class="itemName">报销申请</view>
				</view>
			</view>
		</view>
		<!-- 差旅预订 -->
		<view class="toolWrap">
			<view class="toolTitle">差旅预订</view>
			<view class="toolBox">
				<view class="toolItem" @click="gotoPage('/pages/order/plane', null, 'A')">
					<image class="toolImg" src="../../static/travelService/jipiao.png" mode="aspectFill"></image>
					<view class="itemName">机票预订</view>
				</view>
				<view class="toolItem" @click="gotoPage('/pages/order/train', null, 'A')">
					<image class="toolImg" src="../../static/travelService/huoche.png" mode="aspectFill"></image>
					<view class="itemName">火车预订</view>
				</view>
				<view class="toolItem" @click="gotoPage('/pages/order/hotel', null, 'A')">
					<image class="toolImg" src="../../static/travelService/jiudian.png" mode="aspectFill"></image>
					<view class="itemName">酒店预订</view>
				</view>
				<view class="toolItem" @click="gotoPage('/pages/order/list', null, 'A')">
					<image class="toolImg" src="../../static/travelService/chailv.png" mode="aspectFill"></image>
					<view class="itemName">差旅订单</view>
				</view>
			</view>
		</view>
		<!-- 待出行行程 -->
		<view v-if="travelPlan" class="toolWrap">
			<view class="toolTitle toTravel">
				<text>待出行行程</text>
				<view class='checkMore' @click="location_('/pages/travelPlan/list')">
					<text class='moreFont'>查看更多</text>
					<image src="../../static/travelService/more.png" class='morePic' mode="aspectFill"></image>
				</view>
			</view>
			<!-- itineraryType 01火车 02飞机 03酒店 -->
			<view v-if="travelPlan.itineraryType === '01'" class="toolBox">
				<view class="flyTo">
					<view class="fromTo">
						<view class="fromAdd">{{travelPlan.fromCity}}</view>
						<image src="../../static/index/icon_train.png" class='flyImg' mode="aspectFill"></image>
						<view class="">{{travelPlan.toCity}}</view>
					</view>
					
				</view>
				<view class="flyTo">
					<view class="airport">车次：{{travelPlan.vehicleNo}}</view>
					<view class="flyTime">{{travelPlan.orderTime}}</view>
				</view>
			</view>
			<!-- itineraryType 01火车 02飞机 03酒店 -->
			<view v-if="travelPlan.itineraryType === '02'" class="toolBox">
				<view class="flyTo">
					<view class="fromTo">
						<view class="fromAdd">{{travelPlan.fromStation}}</view>
						<image src="../../static/travelService/flyTo.png" class='flyImg' mode="aspectFill"></image>
						<view class="">{{travelPlan.toStation}}</view>
					</view>
					
				</view>
				<view class="flyTo">
					<view class="airport">航班号：{{travelPlan.vehicleNo}}</view>
					<view class="flyTime">{{travelPlan.orderTime}}</view>
				</view>
			</view>
			<!-- itineraryType 01火车 02飞机 03酒店 -->
			<view v-if="travelPlan.itineraryType === '03'" class="toolBox">
				<view class="flyTo">
					<view class="fromTo">
						<view class="fromAdd">入住：{{travelPlan.fromDate.slice(5, 10)}}</view>
						<image src="../../static/index/icon_hotel.png" class='flyImg' mode="aspectFill" style="height:32rpx;"></image>
						<view class="">离店：{{travelPlan.toDate.slice(5, 10)}}</view>
					</view>
					
				</view>
				<view class="flyTo">
					<view class="airport">{{travelPlan.toStation}}</view>
				</view>
			</view>
			
		</view>
		<!-- 轮播图 -->
		<!-- <view class="swiperBox">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" duration="800">
				<swiper-item>
					<img src="../../static/travelService/travelSwiper.png" class='travelSwiper' alt="">
				</swiper-item>
				<swiper-item>
					<img src="../../static/travelService/travelSwiper.png" class='travelSwiper' alt="">
				</swiper-item>
			</swiper>
		</view> -->
		<view class="swiperBox">
			<img src="../../static/index/banner1.png" class='travelSwiper' alt="">
		</view>
		<!-- 差旅服务 -->
		<view class="travelService">
			<view class="toolTitle">差旅服务</view>
			<view class="bottomView">
				<view class="viewItem" @click="showHotline()">
					<img src="../../static/travelService/servicer.png" class='bottomImg' alt="">
					<view class="bottomFont">客服热线</view>
				</view>
				<view class="viewItem">
					<img src="../../static/travelService/12306.png" class='bottomImg' alt="">
					<view class="bottomFont">12306服务</view>
				</view>
			</view>
		</view>
	</view>
	<view v-else class="contentSk">
		<j-skeleton :loading="showSkeleton" :skType="2"></j-skeleton>
	</view>
</template>

<script>
	import {} from "@/utils/utils";
	import login from "@/api/login.js";
	import { userInfo, userAuth} from '@/api/app.js'
	import { travelPlanList } from '@/api/travelApi.js'
	import {
		getSafe,
		getBatchDict,
	} from "@/utils/utils";

	export default {
		components: {
			// SimpleDateTimePicker,
		},
		data() {
			return {
				showCancelBtn: true, // 是否展示确定按钮
				inductCodeId: "shkpstaff02022062400242513", // 入职码id
				myCompany: "农银金融科技有限责任公司", // 个人所属公司
				showModal: false, // 是否展示自定义模态框
				modalContent: "", // 自定义模态框内容
				modalTitle: "温馨提示", // 自定义模态框标题
				confirmTxt: "", // 确认按钮文案
				modalType: "1", // 自定义模态框类型（页面多次调用组件，判断类型-取消-确定执行不同回调）1-第一次扫码成功 2-服务授权  3-二维码无效  4-重复扫码（暂时没有流程，不能判断）
				title: "picker-view",
				// visible: true,
				// indicatorStyle: `height: 50px;`,
				// birthday: "",
				userInfo: null,
				isMan: false,
				showPage: false,
				isShowCompany: true,
				bannerList: [{
					icon: "../../static/travelService/travelBanner.png",
					itemId: "travleBanner"
				}],
				// midBannerInterval: "",
				paddingViewHeight: false,
				headerScroll: false,
				showSkeleton: false,
				
				isHavePermission: false,//是否有审批
				hasTravelPlan: false, //是否有待出行
				travelPlan: "", // 待出行第一条
			};
		},
		async created() {
			uni.setStorageSync("phoneModel", uni.getSystemInfoSync().model); // 获取当前手机得系统，主要用于解决系统兼容性问题
			uni.setStorageSync("safeFlag", getSafe()); // 获取手机型号判断底部安全距离

		},
		async onLoad(options) {
			// 是否加密
			// 没有密钥先获取密钥
			// 判断如果是选择公司页面返回并且重新选择了公司 需要更改公司信息
			// 暂时不调用城市
			// this.getCities()
			if (options.company) {
				this.myCompany = options.company;
			}
			if (options.status) {
				// this.status = options.status;
				this.modalType = 2;
				this.modalContent =
					`感谢您使用薪资管家差旅服务模块！我们非常重视您的个人信息和隐私保护。为了更好地保障您的个人权益，在您使用我们的产品前，请务必审慎阅读《薪资管家服务协议及隐私政策》内的所有条款，尤其是一、我们对您的个人信息的收集、保存、使用、保护等规则条款，以及您的用户权利等条款；二、约定我们的限制责任、免责条款；三、您如何行使您的合法权益等内容。`;
				this.modalTitle = "用户协议及隐私保护";
				this.confirmTxt = "同意";
				this.showCancelBtn = true;
				this.showModal = true;
			}
			// uni.setStorageSync("userId", "jkbp00user00O2022052600232501");
			// uni.setStorageSync("userId", "jkbpuser2022052700230657");
			// uni.setStorageSync("uniqueId", "16606336878283102836");
			// uni.setStorageSync("token", "chailvzhuanyong")
			// uni.setStorageSync("token", "zhangye")
			// uni.setStorageSync("userId", "jkbp00user00O20220");
			
			// 初始化
			this.init()
			// 骨架屏
			this.showSkeleton = true;
			setTimeout(() => {
				this.showSkeleton = false;
			}, 1000);
		},
		async onShow() {
			
			
			this.showPage = true;
			if (uni.getStorageSync("idNo")) return;
			
			if (this.$store.state.isCrypto) {
				await this.$getPublicKey();
			}
			if(this.userInfo && this.userInfo.enterpriseId){
				this.getPlanList()
			}
			
			
			// 获取用户信息
			// this.getUserInfo()
			
			// const [err, res] = await login.getUserInfo({});
			// if (res) {
			// 	let result = res.data;
			// 	uni.setStorageSync("name", result.name);
			// 	uni.setStorageSync("custId", result.custId);
			// 	uni.setStorageSync("idType", result.idType);
			// 	uni.setStorageSync("idNo", result.idNo);
			// 	uni.setStorageSync("token", "11111111111");
			// 	uni.setStorageSync("department", "数字生态一部");
			// 	uni.setStorageSync("post", "开发工程师");
			// 	uni.setStorageSync("rank", "P8");
			// 	uni.setStorageSync("position", "开发");
			// }
			

			// my.call("getStartupParams", async (result) => {
			//   if (result.params) {
			//     this.showPage = true;
			//     // 调用的mpass小程序
			//     const data = JSON.parse(result.params);
			//     if (data && data.respCode === "FJKBP0000") {
			//       uni.setStorageSync("token", data.accessToken);
			//       if (uni.getStorageSync("idNo")) return;
			//       this.showSkeleton = true;
			//       if (this.$store.state.isCrypto) {
			//         let result = await this.$getPublicKey();
			//       }
			//       const [err, res] = await login.getUserInfo({});
			//       if (res) {
			//         let result = res.data;
			//         uni.setStorageSync("name", result.name);
			//         uni.setStorageSync("custId", result.custId);
			//         uni.setStorageSync("idType", result.idType);
			//         uni.setStorageSync("idNo", result.idNo);
			//       }
			//       this.showSkeleton = false;
			//     } else {
			//       uni.showToast({
			//         title: "登陆失败",
			//         icon: "none",
			//         duration: 800,
			//       });
			//     }
			//   } else {
			//     // 调用的快e通的
			//     my.call(
			//       "startApp",
			//       {
			//         appId: "30804079", //写死，快易通的id
			//         param: {
			//           clientId: "de054387-074c-4233-bdcb-e044cd6cd78e", //掌印(武研申请)
			//           redirectUri:
			//             "http://10.225.36.50:8090/NJZLFinancingApply/shkp/staff/mpaasH5", //掌印H5
			//           state: "123",
			//           scope: "name,certnum,custinfo", //获取掌印权限
			//           responseType: "code",
			//         },
			//         closeCurrentApp: true,
			//       },
			//       function (res) {}
			//     );
			//   }
			// });
			// const phone = await this.getPhone(); //再次获取手机号
			// uni.setStorageSync("phone", phone || "18518598249");
			// uni.hideTabBar({
			//   animation: false,
			// });
		},
		onPageScroll(e) {
			//获取距离顶部距离
			let scrollTop = e.scrollTop;
			scrollTop > 100 ? (this.headerScroll = true) : (this.headerScroll = false);
		},
		onPullDownRefresh() {
			this.initPage();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 2000);
		},

		methods: {
			//获取城市
			async getCities() {
				console.log('调用接口');
				const [res, err] = await login.getCities({})
				console.log(res);
			},
			init(){
				my.call("getStartupParams", async (result) => {
					console.log(result)
					this.getUserAuth()
					if (result.params) {
						my.alert({
							title: JSON.stringify(result.params)
						})
						// 调用的mpass小程序
						const data = JSON.parse(result.params);
						if (data && data.data && data.data.data) {
							uni.setStorageSync("token", data.data.data.accessToken);
							// 登陆成功 获取用户信息
							this.getUserInfo()
							
						} else {
							// uni.setStorageSync("firstEnter", "true");
							uni.showToast({
								title: "登陆失败",
								icon: "none",
							});
						}
					} else {
						// 调用的快e通的
						my.call(
							"startApp", {
								appId: "30804079", //写死，快易通的id
								param: {
									clientId: "de054387-074c-4233-bdcb-e044cd6cd78e", //掌印(武研申请)
									redirectUri: "https://hiep-test.fintechabchina.com/NJZLFinancingApply/shkp/staff/mpaasH5", //掌印H5
									state: "travel",
									scope: "name,certnum,custinfo", //获取掌印权限
									responseType: "code",
								},
								closeCurrentApp: true,
							},
							function(res) {
								my.alert(JSON.stringify(res))
							}
				
						);
					}
				});
						
			},
			// 获取手机号
			getPhone() {
				return "18878365645";
				// return new Promise((resolve, reject) => {
				//   my.call(
				//     "abcDatabase",
				//     { method: "getData", key: "mobileNo" },
				//     (res) => {
				//       resolve(res.return);
				//     }
				//   );
				// });
			},
			initPage() {
				let token = uni.getStorageSync("token");
				if (token) {
					// this.getDetail();
				}
				// this.getQuerySquarAndBottomMenu();
			},
			gotoPage(url, status, isPackageA) {
				let str = "";
				if (status || status == 0) {
					str = "?status=" + status;
				}

				uni.navigateTo({
					url: url + str,
				});
			},

			gotoCompanyPage() {
				uni.navigateTo({
				  url: `/pages/company/index?idCard=150102198106071024`,
				});
			},

			// 人事信息
			personalClick() {
				// uni.navigateTo({
				//   url: "/pages/components/personnelInfo/index?status=6",
				// });
			},
			// 出差申请
			scanAgreement() {
				uni.navigateTo({
					url: "/pages/travelService/travelRequest",
				});
			},
			overproof() {
				uni.navigateTo({
					url: "/pages/travelService/overproof",
				});
			},
			//报销申请
			toExpensesClaims() {
				uni.navigateTo({
					url: "/pages/travelService/expensesClaims",
				});
			},
			// 出差审批
			scanApproval(){
				uni.navigateTo({
					url: `/pages/webViewh5/index?path=approval`,
					// url: `/pages/webViewh5/index?path=selectRecoverablePeople`,
				});
			},
			// 超标审批
			overproofApproval(){
				uni.navigateTo({
					url: `/pages/webViewh5/index?path=overStandardAlist`,
					// url: `/pages/webViewh5/index?path=selectRecoverablePeople`,
				});
			},
			// 报销审批
			toExpensesClaimsApp(){
				uni.navigateTo({
					url: `/pages/webViewh5/index?path=reimburseApproval`,
					// url: `/pages/webViewh5/index?path=selectRecoverablePeople`,
				});
				// url: `/pages/webViewh5/index?path=reimburseApproval`,
			},
			// 自定义模态框取消
			cancelModal() {
				// 不管那种状态取消都只关闭模态框组件
				this.showModal = false;
			},
			// 自定义模态框确定
			confirmModal() {
				const {
					inductCodeId
				} = this;
				this.showModal = false; // 先关闭模态框
				//
				if (this.modalType == "2") {
					this.scanCode();
				} else if (this.modalType == "1") {
					getBatchDict(); // 批量获取数据字典
					uni.navigateTo({
						url: `/pages/components/inductInfo/index?inductCodeId=${inductCodeId}&status=1`,
					});
				}
			},
			// 页面跳转
			regularClick(status) {},
			async getUserInfo() {
				this.userInfo = uni.getStorageSync("userInfo");
				let enterpriseId =  uni.getStorageSync("enterpriseId") || ''
			
					let reqData = enterpriseId ? {"enterpriseId":enterpriseId} : {}
					const [err, res] = await userInfo(reqData);
					// 根据结果进行处理
					if (res) {
						// 身份信息存本地或者state TODO信息筛选
						this.userInfo = res.data;
						uni.setStorageSync("userInfo", this.userInfo);
						// 请求审批权限
						this.getUserAuth()
						// 待出行列表
						this.getPlanList()
					} else {
						
					}
					uni.removeStorageSync("enterpriseId")
				
				// 如果有证件号则认为已认证
				if (this.userInfo.codeId) {
					uni.setStorageSync("isAuth", true);
				}
			},
			// 获取用户权限
			async getUserAuth(){
				const [err, res] = await userAuth();
				this.isHavePermission = res && res.data && res.data.isHavePermission
			},
			getPlanList(current = 1){
					let data = {
						isCheckNoItinerary: true,
						pageSize: 10,
						index: current
					}
					travelPlanList({...data}).then(res=>{
						console.log(res)
						if(res[1] && res[1].respCode === 'FJKBP0000' && res[1].respCode !==null){
							this.travelPlan = res[1].data[2]
							if(this.travelPlan && this.travelPlan.id && this.travelPlan.itineraryType !== '03'){
								this.travelPlan.orderTime = `${this.travelPlan.useDate.slice(0,10)} ${this.travelPlan.ordinal} ${this.travelPlan.useDate.slice(10,16)}`
							}
						} 
					})
			},
			// 针对个别机型增加底部留白高度
			initPaddingView() {
				let _this = this;
				uni.getSystemInfo({
					success: function(res) {
						let model = ["X", "XR", "XS", "11", "12", "13", "14", "15"];
						model.forEach((item) => {
							//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
							if (
								res.model.indexOf(item) != -1 &&
								res.model.indexOf("iPhone") != -1
							) {
								_this.paddingViewHeight = true;
							}
						});
					},
				});
			},
			location_(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 热线
			showHotline(){
				uni.showActionSheet({
					itemList: ['010-95593']
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.contentSk {
		width: 100%;
		height: 100%;
		padding: 0;
		background-color: #fff;
	}

	.content {
		width: 100%;
		height: auto;
		min-height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.content2 {
		width: 100%;
		height: auto;
		min-height: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
		overflow: hidden;

		.agreeTitle {
			margin-top: 128rpx;
			font-size: 48rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.agreeConBox {
			position: relative;
			margin-top: 68rpx;

			.agreeIcon {
				position: absolute;
				left: 7rpx;
				top: 10rpx;
				margin-right: 16rpx;
				width: 34rpx;
				height: 34rpx;
			}

			.agreeCon {
				font-size: 36rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				text-indent: 65rpx;
				display: inline-block;
				line-height: 52rpx;
			}
		}

		.agreeSubCon {
			margin-top: 192rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.agreeBtnWrap {
			width: calc(100% - 0);
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 48rpx;
			margin-bottom: 48rpx;

			.agreeCancelBtn,
			.agreeOkBtn {
				flex: 1;
				line-height: 88rpx;
				border-radius: 8rpx;
				background: #ffa900;
				font-size: 36rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 500;
				color: #ffffff;
				text-align: center;
			}

			.agreeCancelBtn {
				background: #ffffff;
				color: #ffa900;
				margin-right: 32rpx;
				border: 1px solid #ffa900;
			}
		}
	}

	.top-banner {
		width: 100%;
		// position: relative;
	}

	.banner-top {
		position: fixed;
		box-sizing: border-box;
		padding: 50rpx 10rpx;
		left: 0;
		width: 100%;
		height: 72rpx;
		display: flex;
		align-items: center;
		z-index: 9;

		.banner-top-qianndao,
		.banner-top-xiaoxi,
		.banner-top-saoyisao {
			width: 44rpx;
			height: 44rpx;
			padding: 0 20rpx;

			image {
				width: 44rpx;
				height: 44rpx;
			}
		}

		.banner-top-search {
			width: 750rpx;
		}
	}

	.banner-top-active {
		background-color: #1b59f5;
	}

	// .menuList {
	// 	width: 100%;
	// }
	.companyWrap {
		width: 100%;
		height: 200rpx;
		background-image: url("../../static/index/bg.png");
		border-radius: 20rpx;
		background-size: cover;
		position: relative;
		margin-top: 0rpx;

		.companyBox {
			display: flex;
			flex-direction: row;
			padding-top: 40rpx;
			align-items: center;
			justify-content: center;
			position: relative;
			height: 100%;
			box-sizing: border-box;

			.img {
				width: 152rpx;
				height: 100%;

				.pic {
					width: 120rpx;
					height: 120rpx;
					margin-left: 32rpx;
				}
			}

			.companyCon {
				flex: 1;
				padding-left: 20rpx;
				padding-top: 33rpx;
				height: 100%;

				.name {
					font-size: 36rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #ffffff;
					line-height: 50rpx;
				}

				.position {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.8);
					line-height: 40rpx;
					padding-top: 10rpx;

					.uname {
						color: #fff;
						font-weight: 500;
						margin-right: 20rpx;
					}

					.upos {
						color: rgba(255, 255, 255, 0.8000);
						padding-top: 1rpx;
					}
				}
			}

			.btn {
				width: 150rpx;
				height: 44rpx;
				background: #60a5fe;
				border-radius: 0rpx 20rpx 0rpx 20rpx;
				position: absolute;
				right: 0;
				top: 0rpx;
				text-align: center;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				line-height: 44rpx;
			}
		}

		.companyNone {
			font-size: 36rpx;
			// font-family: PingFangSC-Semibold, PingFang SC;
			font-family: PingFangSC-Regular;
			font-weight: 600;
			color: #ffffff;
			text-align: center;

			.tit {
				line-height: 200rpx;
			}

			.titSub {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.8);
			}
		}
	}

	.toolWrap {
		width: 100%;
		margin-top: 40rpx;
		box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(0, 0, 0, 0.08),
			0rpx 3rpx 30rpx 0rpx rgba(0, 0, 0, 0.02);
		border-radius: 20rpx;
		padding: 32rpx 0rpx 12rpx 0rpx;
		box-sizing: border-box;

		.toolTitle {
			font-size: 34rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 34rpx;
			margin-bottom: 40rpx;
			padding-left: 32rpx;
		}

		.toolBox {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}

		.toolItem {
			width: 25%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.toolImg {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 16rpx;
			}

			.itemName {
				font-size: 26rpx;
				font-weight: 600;
				color: #333333;
				margin-bottom: 40rpx;
			}
		}
	}

	.mid-banner {
		width: 100%;
		margin-bottom: 10px;
	}

	.scroll-template {
		width: 100%;
		margin-bottom: 10px;
	}

	.horizontal-template {
		width: 100%;
		margin-bottom: 10px;
	}

	.toTravel {
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #E5E5E5;
		margin-bottom: 0;
		padding-bottom: 28rpx;
	}

	.checkMore {
		font-size: 28rpx;
		font-weight: 400 !important;
		color: #666666;
		padding-right: 32rpx;

		.moreFont {
			font-weight: 400 !important;
			padding-right: 12rpx;
		}

		.morePic {
			position: relative;
			top: 2rpx;
			width: 16rpx;
			height: 28rpx;
			vertical-align: top
		}
	}

	.flyTo {
		width: 100%;
		display: flex;
		padding: 22rpx 32rpx;
		justify-content: space-between;

		.fromTo {
			display: flex;
			font-weight: 500;
			color: #333;
			font-size: 32rpx;

			.fromAdd {
				margin-right: 16rpx;
			}

			.flyImg {
				width: 63rpx;
				height: 24rpx;
				margin-right: 16rpx;
			}
		}

		.flyNo {
			font-size: 30rpx;
			color: #333;
			font-weight: 400;
		}

		.airport {
			font-size: 30rpx;
			color: #000;
		}

		.flyTime {
			color: #7a7a7a;
		}
	}

	.swiperBox {
		position: relative;
		margin-top: 50rpx;
		width: 686rpx;
		img{
			height: 200rpx;
		}
		.travelSwiper {
			width: 686rpx;
			height: 200rpx;
		}

	}

	::v-deep .uni-swiper-dots {
		bottom: 40rpx;
	}

	.travelService {
		width: 100%;
		padding: 60rpx 0 110rpx;

		.toolTitle {
			font-size: 34rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 34rpx;
			margin-bottom: 40rpx;
			padding-left: 32rpx;
		}

		.bottomView {
			display: flex;
			justify-content: space-between;

			.viewItem {
				box-sizing: border-box;
				display: flex;
				width: 330rpx;
				height: 120rpx;
				padding-left: 38rpx;
				border-radius: 10rpx;
				box-shadow: 2rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.08),
					-24rpx -32rpx 30rpx 8rpx rgba(0, 0, 0, 0.02);

				.bottomImg {
					position: relative;
					top: 50%;
					transform: translate(0, -50%);
					width: 64rpx;
					height: 64rpx;
				}

				.bottomFont {
					height: 120rpx;
					line-height: 120rpx;
					font-size: 30rpx;
					color: #222;
				}
			}
		}
	}
</style>
